<template>
  <el-card>
    <div slot="header">
      <span>查看运费</span>
    </div>
    <BasicTable
      :showSelectCol="false"
      :showPagination="false"
      :columns="tableColumn"
      :dataSource="freightBillDTOList"
      :tableHeight="400"
    />
    <el-row type="flex" justify="center" class="page-footer">
      <el-button @click="handleCancel">返回</el-button>
    </el-row>
  </el-card>
</template>
<script>
import BasicTable from '@/components/supplier/BasicTable';
import { isResponseSuccess } from '@/pages/supplier/utils/bizUtils';
import { SHIPPING_STATUS_SELECT_LIST } from '@/pages/supplier/constants/common';
import {
  queryFreighDetailService,
  queryFreighDetailByProcessBillIdService
} from '@api/supplier/management/freight';
import { queryManageAreaService } from '@api/supplier/components';

export default {
  components: {
    BasicTable,
  },
  data () {
    return {
      supplierId: null,
      tableColumn: [],
      areaOptions: [], // 所属区域下拉集合
      freightBillDTOList: [], // 表格数据
    };
  },
  created () {
    // this.queryAreaList()
    this.initTableCloumn()
    const { supplierId, processId } = this.$route.query;
    this.supplierId = supplierId;
    this.processBillId = processId;
    if (supplierId) {
      this.getDetailData();
    }
    if (processId) {
      this.getDetailDataByProcessBillId();
    }
  },
  methods: {
    // 获取所属区域下拉集合
    queryAreaList () {
      queryManageAreaService().then((res) => {
        const { result } = res;
        result.forEach(item => {
          item.label = item.manageAreaName
          item.value = item.manageAreaId
        });
        this.areaOptions = result.filter((item) => item.manageAreaName !== '集团总部');
        // this.initTableCloumn()
      })
    },
    // 初始化表头
    initTableCloumn () {
      this.tableColumn = [
        { key: 'supplierCode', title: '供应商代码', width: 90 },
        { key: 'supplierName', title: '供应商名称', width: 90 },
        {
          key: 'fleetName',
          title: '供货车队',
        },
        {
          key: 'areaName',
          title: '所属区域',
        },
        { key: 'freightType', title: '运费类型', width: 150 },
        {
          key: 'unitName',
          title: '计量单位',
        },
        { key: 'price', title: '单价（元）', width: 100 },
        { key: 'floatRatio', title: '浮动比例' },
        { key: 'description', title: '运费描述' },
        {
          key: 'enabled',
          title: '是否启用',
          formatter: (row, columns, cellValue) => {
            return this.formatEnabled(cellValue);
          },
        },
        { key: 'remark', title: '备注' },
      ];
    },
    formatEnabled (value) {
      const filterList = SHIPPING_STATUS_SELECT_LIST.filter(item => (item.value == value));
      if (filterList.length !== 0) {
        return filterList[0].label;
      }
      return value;
    },
    // 获取详情
    getDetailData () {
      queryFreighDetailService({ supplierId: this.supplierId }).then((res) => {
        if (isResponseSuccess(res)) {
          const { result } = res;
          this.freightBillDTOList = result;
        }
      });
    },
    // 获取详情 通过单据id
    getDetailDataByProcessBillId () {
      queryFreighDetailByProcessBillIdService({ processBillId: this.processBillId }).then((res) => {
        if (isResponseSuccess(res)) {
          const { result } = res;
          this.freightBillDTOList = result;
        }
      });
    },
    // 取消
    handleCancel () {
      this.$router.go(-1);
    },
  }
};
</script>
<style scoped>
.page-footer {
  margin-top: 10px;
}
</style>
